TECH | PRO: WEB DEVELOPMENT

Showing posts with label WEB DEVELOPMENT. Show all posts

Wednesday 20 February 2019

HOW TO POP WITH TOGGLE BUTTON HTML5 CSS3 JAVASCRIPT

POP MENU LIKE NOTIFICATION IN HTML5 CSS3 WITH JAVASCRIPY

When you click on Click on " Click me to Pop Up! ", Menu will appear with some text ,
as "Hello Mr Who ! How are You Feeling today " You can edit the text and can recreate the Edit Text

CODE FOR THIS SCRIPT

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Click me to Pop Up!
<span class="popuptext" id="myPopup">Hello Mr Who ! How are You Feeling today</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>

</body>
</html>

MAKE SHADED BOX FOR TEXT HTML5 CSS3

UMER MUKHTAR WEB DEVELOPMENT ,

To make a blockquote without a box, you simply type your text, then highlight it, then click on the Quote Mark button. If you look at your Edit HTML tab, you’ll see the HTML for a blockquote is <blockquote>This is some quoted text.</blockquote>

To spice up your quote you may want to add a shaded box so it stands out on your page more. To do that, copy and paste this code into your Edit HTML tab (not your Compose tab).

<style="border: 2px solid #666; padding: 10px; background-color: #ccc;">
 This is some quoted text.

BOX MODEL APPEAR CLICK ON BUTTON HTML5 CSS BOOSTRAP

UMER MUKHTAR WEB DEVELOPMENT ,

BOX MODEL MENU APPEAR CLICK ON BUTTON

When You Click on Button and it appears Bootstrap Model . Model contain Some Type of Information. This is made in Bootstap in HTML5 Source .

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

Source Code For This Bootstrape

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-4">

  <meta name="viewport" content="width=device-width, initial-scale=3">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  <h2>
Filterable Table</h2>
<p>
Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">

  <br>

  <table class="table table-bordered table-striped">

    <thead>
<tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>
</thead>

    <tbody id="myTable">
<tr>

        <td>John</td>

        <td>Doe</td>

        <td>john@example.com</td>

      </tr>
<tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>mary@mail.com</td>

      </tr>
<tr>

        <td>July</td>

        <td>Dooley</td>

        <td>july@greatstuff.com</td>

      </tr>
<tr>

        <td>Anja</td>

        <td>Ravendale</td>

        <td>a_r@test.com</td>

      </tr>
</tbody>

  </table>
<p>
Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>

$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myTable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>



</body>

</html>

You Can Edit Code Easily and Add Your Desire type Text .

FILTER TABLE DATA HTML5 CSS3

UMER MUKHTAR WEB DEVELOPMENT ,

SEARCH LARGE TABLE WITH KEYWORDS

Sometimes we have Table , Which contains Data of Different Persons with His Name , Father Name

CNIC and some other relevent data . Table will Look like we made in Excel . When You make such Table in HTML5 CSS3 and Display it on web and you are looking for your Data , Si if Data is about of 1k-10K People , so it will take time to find your Information as you will just scroll and Scroll.

So Here we have a Filter Search Option in HTML5 which make it easy for finding information in a

long Table with huge Information.

Here We Will look into Example

In Above Picture , you are seeing Table and their Having Search Bar and Below are some Information of Different People with Their Correponding Name , Last Name and Email.When You write your Name , Last Name or Email Result of that record will be singly Displayed. If Multiple record of a single Name or Exist , then Multiple record of that Name will be Displayed If your search keywords are Same in other Rows.

SOURCE CODE FOR THIS FILTER TABLE

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-4">

  <meta name="viewport" content="width=device-width, initial-scale=3">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  <h2>Filterable Table</h2>

  <p>Type something in the input field to search the table for first names, last names or emails:</p>  

  <input class="form-control" id="myInput" type="text" placeholder="Search..">

  <br>

  <table class="table table-bordered table-striped">

    <thead>

      <tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>

    </thead>

    <tbody id="myTable">

      <tr>

        <td>John</td>

        <td>Doe</td>

        <td>john@example.com</td>

      </tr>

      <tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>mary@mail.com</td>

      </tr>

      <tr>

        <td>July</td>

        <td>Dooley</td>

        <td>july@greatstuff.com</td>

      </tr>

      <tr>

        <td>Anja</td>

        <td>Ravendale</td>

        <td>a_r@test.com</td>

      </tr>

      

      

    </tbody>

  </table>

  

  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</div>



<script>

$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myTable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>



</body>

</html>

Code can Be Edit and You can Add Multiple Rows , Columns or any other Information.

TUTORIALS REGARDING HTML5 CSS3 COMING SOON

UMER MUKHTAR WEB DEVELOPMENT ,

TUTORIALS WILL BE UPLOADED EACH DAY ABOUT HTML5. WAIT AND VISIT REGULARLY

Wednesday 20 February 2019

HOW TO POP WITH TOGGLE BUTTON HTML5 CSS3 JAVASCRIPT

POP MENU LIKE NOTIFICATION IN HTML5 CSS3 WITH JAVASCRIPY

CODE FOR THIS SCRIPT

Thursday 14 February 2019

MAKE SHADED BOX FOR TEXT HTML5 CSS3

BOX MODEL APPEAR CLICK ON BUTTON HTML5 CSS BOOSTRAP

BOX MODEL MENU APPEAR CLICK ON BUTTON

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

Wednesday 13 February 2019

FILTER TABLE DATA HTML5 CSS3

SEARCH LARGE TABLE WITH KEYWORDS

SOURCE CODE FOR THIS FILTER TABLE

TUTORIALS REGARDING HTML5 CSS3 COMING SOON

Follow Us

Recent

Featured post

FILTER TABLE DATA HTML5 CSS3

Blog Archive

BLOGS CONNECT

NAVIGATE

Get TO Know Us

Wednesday 20 February 2019

HOW TO POP WITH TOGGLE BUTTON HTML5 CSS3 JAVASCRIPT

POP MENU LIKE NOTIFICATION IN HTML5 CSS3 WITH JAVASCRIPY

CODE FOR THIS SCRIPT

Thursday 14 February 2019

MAKE SHADED BOX FOR TEXT HTML5 CSS3

BOX MODEL APPEAR CLICK ON BUTTON HTML5 CSS BOOSTRAP

BOX MODEL MENU APPEAR CLICK ON BUTTON

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

Wednesday 13 February 2019

FILTER TABLE DATA HTML5 CSS3

SEARCH LARGE TABLE WITH KEYWORDS

SOURCE CODE FOR THIS FILTER TABLE

TUTORIALS REGARDING HTML5 CSS3 COMING SOON

Follow Us

Recent

Featured post

FILTER TABLE DATA HTML5 CSS3

Blog Archive

BLOGS CONNECT

NAVIGATE

Get TO Know Us

Total Pageviews